<template>
	<view class="bgBox">
		<!-- 搜索 -->
		<view class="searchNav">
			<u-search @focus="gonavigate('/pages/search/search')" searchIconColor='#507847' bgColor="#fff" border-color="#507847" :showAction="false">
			</u-search>
			<u-icon name="scan" class="searchScan" color="#507847" size="24"></u-icon>
			<u-icon name="/static/images/news.png" @click="gonavigate('/pages/news/news')" size="29" class="news"></u-icon>
		</view>
		<!-- banner -->
		<view class="banner">
			<u-swiper :list="list" :height="swiperHigh" keyName="image" indicatorMode="dot" indicator
				circular></u-swiper>
		</view>
		<!-- 金刚区 -->
		<u-grid :col="4" :border="false" class="kong">
			<u-grid-item v-for="(item,index) in kongList" :key="index" @click="gonavigate(item.pageUrl)">
				<image :src="item.image" class="kongImg"></image>
				<text class="kongText">{{item.name}}</text>
			</u-grid-item>
		</u-grid>
		<!-- 新晋单品 -->
		<view class="newGoods">
			<view class="title-btn">
				<text>新晋单品</text>
			</view>
			<card cardName="NEW"></card>
			<u-scroll-list :indicator="false" class="newList">
				<view class="newItem" v-for="(item,index) in newGoods" :key="index">
					<image :src="item.img" class="newImg" width="188" mode="widthFix"></image>
					<view class="msg">
						<div class="goodName">{{item.name}}</div>
						<text class="goodDetail">{{item.detail}}</text>
						<text class="goodDiameter">{{item.diameter}}</text>
						<div class="goodPrice">石友价：￥{{item.price}}</div>
						<u-button color="#719470" class="goodBtn">查看详情</u-button>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<!-- 精选好物 -->
		<view class="goodsList">
			<view class="title-btn">
				<text>精选好物</text>
			</view>
			<card cardName="NEW"></card>
			<goodList></goodList>
		</view>
	</view>
</template>

<script>
	import card from "@/components/index/card.vue"
	import goodList from "@/components/index/goodList.vue"
	export default {
		data() {
			return {
				list: [{
						image: '/static/images/banner/banner1.png'
					},
					{
						image: '/static/images/banner/banner2.jpg'
					},
					{
						image: '/static/images/banner/banner3.jpg'
					}
				],
				swiperHigh: 180,
				kongList: [{
						name: "鉴宝",
						image: "/static/images/kong/check.png",
						pageUrl:"/pages/treasure/treasure"
					},
					{
						name: "保养",
						image: "/static/images/kong/care.png"
					},
					{
						name: "估值",
						image: "/static/images/kong/value.png",
						pageUrl:"/pages/evaluate/evaluate"
					},
					{
						name: "翡圈",
						image: "/static/images/kong/loop.png",
						pageUrl:"/pages/friend/friend"
					}
				],
				newGoods: [{
						name: '翡翠项链',
						detail: '天然翡翠A货   冰润满绿圆珠项链',
						diameter: '直径：10',
						price: '74.1万',
						img: '/static/images/goods/newGood1.jpg'
					},
					{
						name: '翡翠项链',
						detail: '天然翡翠A货   冰润满绿圆珠项链',
						diameter: '直径：10',
						price: '20.1万',
						img: '/static/images/goods/newGood2.jpg'
					},
					{
						name: '翡翠项链',
						detail: '天然翡翠A货   冰润满绿圆珠项链',
						diameter: '直径：10',
						price: '74.1万',
						img: '/static/images/goods/newGood3.jpg'
					}
				]
			}
		},
		components: {
			card,
			goodList
		},
		methods: {
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.bgBox {
		.searchNav {
			display: flex;
			align-items: center;
			margin: $uni-spacing-row-lg; 
			.searchScan {
				position: absolute;
				top: 6rpx;
				right: 118rpx;
			}
		}

		.kong {
			padding-top: 20rpx;
			margin: $uni-spacing-row-lg;
			.kongImg {
				width: 170rpx;
				height: 170rpx;
			}

			.kongText {
				font-size: $uni-font-size-lg;
				color: #333;
			}
		}

		.newGoods {
			margin: $uni-spacing-row-lg;
			.newList {
				.newItem {
					width: 100%;
					display: flex;
					padding-right: 20rpx;
					padding-top: 8rpx;

					.newImg {
						width: 600rpx;
						border-radius: 14rpx;
					}

					.msg {
						padding: 30rpx;
						display: flex;
						flex-direction: column;

						.goodName {
							color: $gs-color-green;
							font-size: $gs-font-base;
							padding-top: $gs-spacing-col-lg;
						}

						.goodPrice {
							font-size: $uni-font-size-base;
							color: $uni-color-error;
						}

						.goodName,
						.goodDetail,
						.goodPrice,
						.goodBtn {
							margin-top: $uni-spacing-col-base;
						}

						// .goodDetail{
						// 	overflow: hidden;
						// 	text-overflow: ellipsis;
						// 	white-space: nowrap;
						// }
					}
				}

			}
		}

	}
</style>